<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="bg-purple">
            <el-image :src="require('@/assets/logo.png')" class="logo"></el-image>
            <el-header>OneDay</el-header>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <div class="grid-content transparent">
            <el-carousel :interval="5000" type="card" height="200px">
              <el-carousel-item v-for="item in show" :key="item">
                <el-image class="show" :src="item" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple">
        </div></el-col>

        <el-col :span="8"><div class="grid-content bg-purple-light">
        <el-input v-model="input_name" placeholder='请输入用户名'></el-input>
        </div></el-col>

        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple">
        </div></el-col>

        <el-col :span="8"><div class="grid-content bg-purple-light">
        <el-input v-model="input_password" placeholder='请输入密码' show-password = false></el-input>
        </div></el-col>

        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple">
        </div></el-col>

        <el-col :span="2" ><div>
        <el-button @click = "register" class = "mybutton">注册</el-button>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
        </div></el-col>
        <el-col :span="2"  ><div>
        <el-button @click = "login" class = "mybutton">登录</el-button>
        </div></el-col>

        <el-col :span="8"><div class="grid-content bg-purple">
        </div></el-col>
      </el-row>

    </div>
</template>
<script>
  import Comfirm from "../sub/comfirm.vue"
  import axios from 'axios'
export default {
   data() {
      return {
        input_name:'',
        input_password:'',
        show:[
          require("@/assets/show/001.jpg"),
          require("@/assets/show/002.jpg"),
          require("@/assets/show/003.jpg"),
          require("@/assets/show/004.jpg"),
          require("@/assets/show/005.jpg"),
          require("@/assets/show/006.jpg"),
          require("@/assets/show/007.jpg"),
          require("@/assets/show/008.png"),
        ]
      }
   },
   activated() {
   },
 watch: {
},
created(){
},
mounted(){
},
methods:{
  OnComfirm(val){
    alert(val);
  },
  register(){
    var _this = this;
    if (this.$data.input_name == "" || this.$data.input_password == "") {
        alert("帐号和密码不能为空")
    } else {
        //向服务器提交数据
        axios.post('http://oneday.vaiwan.com/user/register', {
                name: this.$data.input_name,
                password: this.$data.input_password
            })
            .then(function(response) {
                //成功时服务器返回 response 数据
                /*data:
                  data: "register success!"
                  msg: "成功"
                  status: "200"
                  success: true*/
                if(response.data.success){
                  alert(response.data.msg);
                  localStorage.clear();
                  localStorage.setItem("user_name",response.data.data.name)
                  localStorage.setItem("user_id",response.data.data.id)
                  localStorage.setItem("user_penpal_id",response.data.data.pal)
                  localStorage.setItem("user_description",response.data.data.description)
                  localStorage.setItem("user_password",response.data.data.password)
                  localStorage.setItem("token",response.data.data.token)
                  _this.$router.replace("/home");
                }
                else{
                  alert(response.data.msg);
                }
                console.log(response)
            })
            .catch(function(error) {
                console.log(error);
            });
    }
  },
  login(){
    var _this = this;
    if (this.$data.input_name == "" || this.$data.input_password == "") {
        alert("帐号和密码不能为空")
    } else {
        //向服务器提交数据
        axios.post('http://oneday.vaiwan.com/user/login', {
                name: this.$data.input_name,
                password: this.$data.input_password
            })
            .then(function(response) {
                //成功时服务器返回 response 数据

                if(response.data.success){
                  alert("login success!");
                  localStorage.clear();
                  localStorage.setItem("user_name",response.data.data.name)
                  localStorage.setItem("user_id",response.data.data.id)
                  localStorage.setItem("user_penpal_id",response.data.data.pal)
                  localStorage.setItem("user_description",response.data.data.description)
                  localStorage.setItem("user_password",response.data.data.password)
                  localStorage.setItem("token",response.data.data.token)
                  //this.$Global.set_ueser_name(response.data.data.name);
                  //this.$Global.set_user_id(response.data.data.id);
                  //this.$Global.set_penpal_id(response.data.data.pal);
                  _this.$router.replace("/home");
                }else{
                  alert("login failed!")
                }
                console.log(response)
            })
            .catch(function(error) {
                console.log(error);
            });
    }
  },
},
components:{
  Comfirm
}
/* import axios from 'axios'
    export default {
        methods: {
            submit() {
                var name = document.getElementById("name").value;
                var pwd = document.getElementById("pwd").value;
                if (name == "" || pwd == "") {
                    alert("帐号和密码不能为空")
                } else {
                    //向服务器提交数据
                    axios.post('http://127.0.0.1:3000/login', {
                            name: name,
                            pwd: pwd
                        })
                        .then(function(response) {
                            //成功时服务器返回 response 数据
                            alert(response.data)
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            }
        },
    }
*/
}
</script>
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 40px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .logo{
    width: 50px;
    height: 50px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .show{
    width: 512px;
    height: 300px;
    border: #000000;
    border-radius: 5px;
  }
  .transparent{
    background-color: transparent;
  }
  .mybutton{
    margin: 30px,30px,30px,30px;
  }
</style>
